<template>
  <div class="book-container header-bar">
    <div class="book-content">
      <span>网罗天下图书 传承中华文明</span>
      <div class="menus">
        <loginOrRegister></loginOrRegister>
        <message></message>
        <shopCar></shopCar>
        <myOrder></myOrder>
        <personCenter></personCenter>
        <sellerCenter></sellerCenter>
        <service></service>
        <phone></phone>
        |
        <logistics></logistics>
      </div>
    </div>
  </div>
</template>

<script>
import loginOrRegister from './components/loginOrRegister'
import message from './components/message'
import shopCar from './components/shopCar'
import myOrder from './components/myOrder'
import personCenter from './components/personCenter'
import sellerCenter from './components/sellerCenter'
import service from './components/service'
import phone from './components/phone'
import logistics from './components/logistics'

export default {
  name: 'headerBar',
  components: {
    loginOrRegister,
    message,
    shopCar,
    myOrder,
    personCenter,
    sellerCenter,
    service,
    phone,
    logistics
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.header-bar {
  height: 36px;
  background: #8C222C;
  .book-content {
    display: flex;
    flex-direction: row;

    line-height: 36px;
    font-size: 12px;
    color: #FFFFFF;
    .menus {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
